<template>
  <details-layout :leftTitle="`全部轨迹(${length})`" @on-scroll-bottom='loadMore' :load-stop="loadStop">
    <div class="detail">
      <mt-button v-for="(val,index) in tags" :key="index" class="self-btn">{{val}}
      </mt-button>
      <axis-y :data="trackData" v-if="trackData.length > 0"></axis-y>
    </div>
    <div class="loadDi" v-if="loadStop">
      ------&nbsp;我也是有底线的&nbsp;------
    </div>
  </details-layout>
</template>

<script>
  import DetailsLayout from '../../components/details-layout'
  import AxisY from '../../components/axis-y'
  import request from '../../helper/request'

  export default {
    name: 'track-block',
    components: {
      DetailsLayout,
      AxisY
    },
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        trackData: [],
        tags: [],
        btnColor: 0,
        length: '',
        page: {},
        loadStop: false
      }
    },
    methods: {
      /**
       * 加载更多
       */
      loadMore() {
        this.loadStop = false
        if (this.page.currPage < this.page.pageCount) {
          this.getQueryList(this.page.currPage + 1, 5)
        } else if (this.page.currPage) {
          this.loadStop = true
        }
      },
      getQueryList(currPage = 1, limit = 10) {
        let param = Object.assign({
          'sjh': '',
          'gjlx': '00',
          'pageObj': {
            'currPage': currPage,
            'pageSize': limit,
            'pagination': '1'
          }
        }, this.$store.state.phone)
        request('superRecord/mobile/gjxx', 'SC0424', param).then(res => {
          this.tags = [`真实轨迹(${res.real || 0})`, `疑似轨迹(${res.virual || 0})`]
          res.gjxxArr.map(resGJ => {
            this.trackData.push({
              time: resGJ.time,
              address: resGJ.dd
            })
          })
          this.length = res.pageResult.totalCount
          this.page = res.pageResult
        }).catch(err => {
          this.$toast(err.msg)
        })
      }
    },
    watch: {},
    mounted() {
    },
    created() {
      this.getQueryList()
    }
  }
</script>

<style scoped lang="scss">
  .detail {
    margin-top: 1rem;
  }

  .self-btn {
    margin: 0rem 0rem 1rem 1rem;
    font-size: 1rem;
    border-radius: 30px;
    height: 1.9rem;
    background-color: #FF6600;
    color: #F2F2F2;
  }

  .loadDi {
    text-align: center;
    padding: .5rem .2rem .8rem;
    color: #ccc;
  }
</style>
